<template>

    <div v-loading="loading">

        <div style="margin-left: 200px;margin-top: 50px">
            <el-button type="primary" @click="addActivityVisible = true">添加活动</el-button>
        </div>
        <div class="settingActivityTable">
            <el-table
                    :data="list"
                    border
                    style="width:1200px">

                <el-table-column
                        style="width: 200px"
                        align="center"
                        prop="title"
                        label="活动标题"
                        width="180">
                </el-table-column>

                <el-table-column
                        style="width: 200px"
                        align="center"
                        prop="full_amount"
                        label="优惠条件"
                        width="180">
                </el-table-column>

                <el-table-column
                        style="width: 200px"
                        align="center"
                        prop="discount_amount"
                        label="折扣">
                </el-table-column>

                <el-table-column
                        style="width: 200px"
                        align="center"
                        prop="start_time"
                        label="开始时间">
                </el-table-column>

                <el-table-column
                        style="width: 200px"
                        align="center"
                        prop="end_time"
                        label="结束时间">
                </el-table-column>

                <el-table-column>
                    <template slot-scope="scope">
                        <el-button
                                size="mini"
                                icon="el-icon-edit"
                                @click="handleUpdateVisible(scope.row)"
                                type="primary">修改
                        </el-button>
                        <el-button
                                @click="handleActivityDelete(scope.row.id)"
                                size="mini"
                                icon="el-icon-delete"
                                type="danger">删除
                        </el-button>
                    </template>
                </el-table-column>

            </el-table>
        </div>

        <!--添加活动-->
        <el-dialog title="添加活动" :visible.sync="addActivityVisible">
            <el-form :model="addActivityData" ref="addActivityForm" :rules="rules">


                <el-form-item label="活动名称" :label-width="addActivityLabelWidth" prop="title">
                    <el-input v-model="addActivityData.title" style="width: 500px"></el-input>
                </el-form-item>
                <el-form-item label="优惠条件" :label-width="addActivityLabelWidth" prop="full_amount">
                    <el-input-number
                            style="width: 500px"
                            v-model="addActivityData.full_amount"
                            :min="1"
                            placeholder="请输入优惠条件">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="折扣" :label-width="addActivityLabelWidth" prop="discount_amount">
                    <el-input-number
                            style="width: 500px"
                            v-model="addActivityData.discount_amount"
                            :min="1"
                            placeholder="请输入折扣">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="addActivityLabelWidth" prop="start_time">
                    <el-date-picker
                            style="width: 500px"
                            v-model="addActivityData.start_time"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="addActivityLabelWidth" prop="end_time">
                    <el-date-picker
                            style="width: 500px"
                            v-model="addActivityData.end_time"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addActivityVisible = false">取 消</el-button>
                <el-button type="primary" @click="addActivity('addActivityForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--修改活动-->
        <el-dialog title="修改活动" :visible.sync="updateActivityVisible">
            <el-form :model="updateActivityData" ref="updateActivityForm" :rules="rules">


                <el-form-item label="活动名称" :label-width="addActivityLabelWidth" prop="title">
                    <el-input v-model="updateActivityData.title" style="width: 500px"></el-input>
                </el-form-item>
                <el-form-item label="优惠条件" :label-width="addActivityLabelWidth" prop="full_amount">
                    <el-input-number
                            style="width: 500px"
                            v-model="updateActivityData.full_amount"
                            :min="1"
                            placeholder="请输入优惠条件">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="折扣" :label-width="addActivityLabelWidth" prop="discount_amount">
                    <el-input-number
                            style="width: 500px"
                            v-model="updateActivityData.discount_amount"
                            :min="1"
                            placeholder="请输入折扣">
                    </el-input-number>
                </el-form-item>
                <el-form-item label="开始时间" :label-width="addActivityLabelWidth" prop="start_time">
                    <el-date-picker
                            style="width: 500px"
                            v-model="updateActivityData.start_time"
                            type="datetime"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            placeholder="开始时间">
                    </el-date-picker>
                </el-form-item>
                <el-form-item label="结束时间" :label-width="addActivityLabelWidth" prop="end_time">
                    <el-date-picker
                            style="width: 500px"
                            v-model="updateActivityData.end_time"
                            value-format="yyyy-MM-dd HH:mm:ss"
                            type="datetime"
                            placeholder="结束时间">
                    </el-date-picker>
                </el-form-item>


            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="updateActivityVisible = false">取 消</el-button>
                <el-button type="primary" @click="updateActivity('updateActivityForm')">确 定</el-button>
            </div>
        </el-dialog>

        <!--分页-->
        <div class="settingActivityPage">
            <el-pagination
                    v-if="pageVisible"
                    :page-size="10"
                    layout="prev, pager, next"
                    :total="total">
            </el-pagination>
        </div>


    </div>
</template>

<script>
    import locale from 'element-ui/lib/locale/lang/zh-CN';
    export default {
        name: 'settingActivity',
        components:{ locale },
        data(){
            return{
                pageVisible: true,
                list: [],
                total: 0,
                loading: false,
                addActivityVisible: false,
                updateActivityVisible: false,
                addActivityData: {},
                updateActivityData: {},
                addActivityLabelWidth: '200px',
                rules:{
                    title: [{required: true, message: '请填写活动标题', trigger: 'blur'}],
                    full_amount: [{required: true, message: '请填写优惠条件', trigger: 'blur'}],
                    discount_amount: [{required: true, message: '请填写折扣', trigger: 'blur'}],
                    start_time: [{required: true, message: '请填写开始事件', trigger: 'blur'}],
                    end_time: [{required: true, message: '请填写结束时间', trigger: 'blur'}]
                }
            }
        },
        methods:{
            //初始化数据
            defaultData(page){
                this.loading = true;
                this.$http.get('/store/activity/list', {
                    params:{
                        token: localStorage.getItem('user_token'),
                        store_id: localStorage.getItem('user_store_id'),
                        pageSize: 10,
                        page: page
                    }
                }).then( response => {
                    if (response.data.status === 'success'){
                        this.list = response.data.data.list;
                        this.total = response.data.data.pagination.total;

                        if (response.data.data.pagination.total < 10){
                            this.pageVisible = false;
                        }
                    }
                    this.loading = false;
                }).catch( () => {
                    this.loading = false;
                })
            },

            //删除活动
            handleActivityDelete(id){
                this.$confirm('是否删除该活动?', '删除活动', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.loading = true;
                    this.$http.post('/store/activity/del', {
                        token: localStorage.getItem('user_token'),
                        id: id
                    }).then( response => {
                        if (response.data.status === 'success'){
                            this.$message({
                                type: 'success',
                                message: '删除成功!'
                            });
                            this.defaultData();
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })

                });
            },

            addActivity(name){
                this.$refs[name].validate((valid) => {
                    if (!valid){
                        return false;
                    }



                    this.addActivityData.token = localStorage.getItem('user_token');
                    this.addActivityData.store_id = localStorage.getItem('user_store_id');
                    this.loading = true;
                    this.$http.post('/store/activity/add', this.addActivityData).then(response => {
                        if (response.data.status === 'success') {
                            this.$message.success('添加成功');
                            this.addActivityData = {};
                            this.defaultData();
                            this.addActivityVisible = false;
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })
                })
            },

            handleUpdateVisible(value){
                this.updateActivityVisible = true;
                this.updateActivityData = value;
            },

            updateActivity(name){
                this.$refs[name].validate((valid) => {
                    if (!valid){
                        return false;
                    }

                    this.updateActivityData.token = localStorage.getItem('user_token');
                    this.updateActivityData.store_id = localStorage.getItem('user_store_id');
                    this.loading = true;
                    this.$http.post('/store/activity/update', this.updateActivityData).then(response => {
                        if (response.data.status === 'success') {
                            this.$message.success('修改成功');
                            this.updateActivityData = {};
                            this.defaultData();
                            this.updateActivityVisible = false;
                        }
                        this.loading = false;
                    }).catch( () => {
                        this.loading = false;
                    })
                })
            }
        },
        mounted() {
            this.defaultData();
        }
    }
</script>

<style>

    .settingActivityTable{
        margin-left: 100px;
        margin-top: 24px;
    }
    .settingActivityPage{
        margin-left: 600px;
        margin-top: 24px;
    }
</style>
